﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebCMD._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>WebCMD</title>

    <script src="jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
        body
        {
            background-color: #EAEAEA;
            font-size: 12px;
        }
        #win
        {
            width: 800px;
            margin: 0 auto;
            height: 480px;
            margin-top: 40px;
            overflow: hidden;
            border: 2px solid #FFFFFF;
            background: rgba(10, 10, 10, 0.9);
            color: #EFEFEF;
        }
        #header
        {
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            font-weight: bold;
            background-color: #FAFAFA;
            color: #000000;
            padding: 2px;
            -webkit-user-select: none;
        }
        #icon
        {
            border: 1px solid #BCBCBC;
            border-top: 3px double #BCBCBC;
            font-size: 10px;
            background: rgba(10, 10, 10, 0.9);
            color: #EFEFEF;
            padding: 1px;
            margin: 2px;
        }
        #output
        {
            height: 432px;
            border: none;
            padding: 5px;
            overflow-x: none;
            overflow-y: auto;
        }
        #input
        {
            display: inline-block;
            min-width: 24px;
            padding: 2px;
            outline:none;
        }
        .bold
        {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="win">
        <div id="header">
            <span id="icon">C:\_</span>WebCMD</div>
        <div id="output">
            <div id="inputWrapper" class="bold">
                <span>&gt;</span>
                <div id="input" contenteditable="true">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function() {
            var win = $('#win');
            var input = $('#input');
            var output = $('#output');
            win.blur(function() {
                input.focus();
            });

            input.on('keydown', function(e) {
                if (e.keyCode == 13) {
                    var cmd = input.text();
                    
                    input.parent().hide();
                    var cmdLine = $('<div class="bold">');
                    cmdLine.text('>' + cmd);
                    output.append(cmdLine);
                    
                    input.text('');
                    
                    send($.trim(cmd));

                    e.preventDefault();
                    return false;
                }
            }).on('blur', function() {
                $(this).focus();
            });
            function send(cmd) {
                $.get('./CMDHandler.ashx', { cmd: cmd, dt: new Date().getTime() }, function(data) {
                    
                    input.parent().show();

                    if (!data) { return }
                    var item = $('<div>');
                    item.html(data.replace(/\n/g, '<br />') + '<br/>');
                    item.append(input.parent());
                    output.append(item);

                    input.focus();
                });
            }
            input.focus();
        });
    </script>

</body>
</html>